<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
                :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="search">
        <el-form ref="queryFormRef" :inline="true" :model="queryParams">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </transition>
    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button icon="Plus" plain type="primary" @click="openSelectOss">添加资源</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button v-hasPermi="['system:role:remove']" :disabled="multiple" icon="CircleClose" plain type="danger"
                       @click="cancelOssAll">
              批量取消授权
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button icon="Close" plain type="warning" @click="handleClose">关闭</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" :search="true" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>
      <el-table v-loading="loading" :data="ossList" @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column v-if="false" align="center" label="对象存储主键" prop="ossId" />
        <el-table-column align="center" label="文件名" prop="fileName" />
        <el-table-column align="center" label="原名" prop="originalName" />
        <el-table-column align="center" label="文件后缀" prop="fileSuffix" />
        <el-table-column align="center" label="文件展示" prop="url">
          <template #default="scope">
            <ImagePreview
              v-if="checkFileSuffix(scope.row.fileSuffix)"
              :height="100"
              :preview-src-list="[scope.row.url]"
              :src="scope.row.url"
              :width="100"
            />
            <span v-if="!checkFileSuffix(scope.row.fileSuffix)" v-text="scope.row.url" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建时间" prop="createTime" sortable="custom" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="上传人" prop="createByName" />
        <el-table-column align="center" label="服务商" prop="service" sortable="custom" />
        <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
          <template #default="scope">
            <el-tooltip content="取消授权" placement="top">
              <el-button icon="CircleClose" link type="primary" @click="cancelOss(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNum"
                  :total="total" @pagination="getList" />
      <select-oss ref="selectRef" :elevatorId="queryParams.elevatorId" @ok="handleQuery" />
    </el-card>
  </div>
</template>

<script lang="ts" name="assignOss" setup>
import { allocatedOssList, authOssCancelAll, ossCancel } from "@/api/iot/elevator";
import selectOss from "./selectOss.vue";


const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const route = useRoute();
const ossList = ref<any[]>([]);
const loading = ref(true);
const showSearch = ref(true);
const multiple = ref(true);
const total = ref(0);
const ossIds = ref<Array<string | number>>([]);

const queryFormRef = ref<ElFormInstance>();
const selectRef = ref<InstanceType<typeof selectOss>>();

const queryParams = reactive<any>({
  pageNum: 1,
  pageSize: 10,
  elevatorId: route.params.elevatorId as string
});

/** 查询分配资源列表 */
const getList = async () => {
  loading.value = true;
  const res = await allocatedOssList(queryParams);
  ossList.value = res.rows;
  total.value = res.total;
  loading.value = false;
};
// 返回按钮
const handleClose = () => {
  const obj = { path: "/iot/elevator/manage/list" };
  proxy?.$tab.closeOpenPage(obj);
};
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};
// 多选框选中数据
const handleSelectionChange = (selection: any[]) => {
  ossIds.value = selection.map(item => item.ossId);
  multiple.value = !selection.length;
};
/** 打开授权用户表弹窗 */
const openSelectOss = () => {
  selectRef.value?.show();
};
/** 取消授权按钮操作 */
const cancelOss = async (row: any) => {
  await proxy?.$modal.confirm("确认要取消该资源\"" + row.originalName + "\"吗？");
  await ossCancel({ elevatorId: route.params.elevatorId, ossId: row.ossId });
  await getList();
  proxy?.$modal.msgSuccess("取消授权成功");
};
/** 批量取消授权按钮操作 */
const cancelOssAll = async () => {
  const roleId = queryParams.elevatorId;
  const oIds = ossIds.value.join(",");
  await proxy?.$modal.confirm("是否取消选中用户授权数据项?");
  await authOssCancelAll({ elevatorId: roleId, ossIds: oIds });
  await getList();
  proxy?.$modal.msgSuccess("取消授权成功");
};

function checkFileSuffix(fileSuffix: string[]) {
  let arr = ["png", "jpg", "jpeg"];
  return arr.some(type => {
    return fileSuffix.indexOf(type) > -1;
  });
}

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped></style>
